<template>
    <div class="iot_menu">
        <img v-for="items in imgsrc" alt="" :key="items.id" :src="items.src" @click="selecte(items.id),SendId(items.id),ChangeIndexFlog(items.flog)">
    </div>
</template>

<script>
import {  inject, reactive, watch,ref } from 'vue';

    export default {
        name:'MainMenu',
        emits:['ChangeMenu'],
        setup(props,context){
            const SendId = (id) => {
                context.emit('ChangeMenu', id);
            };
            let img = [
                'home_default.png',
                'category_default.png',
                'cart_default.png',
                'user_default.png',
                'search_default.png'
            ]
            //保留节点
            let indexFlog = inject('indexFlog')
            let HomeNode = ref(0);
            watch(indexFlog,(New)=>{
                if(New <= 4){
                    HomeNode.value = New
                }
            })
            let CategoryNode = ref(5)
                watch(indexFlog,(New)=>{
                if(New > 4 && New <= 13){
                    CategoryNode.value = New
                }
            })
            let imgsrc = reactive([
                {id:0,src:require('../assets/icons/tabs/'+img[0].slice(0,-11)+'selecte.png'),flog:HomeNode},
                {id:1,src:require('../assets/icons/tabs/'+img[1]),flog:CategoryNode},
                {id:2,src:require('../assets/icons/tabs/'+img[2]),flog:14},
                {id:3,src:require('../assets/icons/tabs/'+img[3]),flog:15},
                {id:4,src:require('../assets/icons/tabs/'+img[4]),flog:16}
            ])
            function selecte(id){
                for(let i = 0 ; i < imgsrc.length;i++){
                    imgsrc[i].src =  require('../assets/icons/tabs/'+img[i].slice(0,-11)+'default.png')
                }
                imgsrc[id].src =  require('../assets/icons/tabs/'+img[id].slice(0,-11)+'selecte.png')
            }
            watch(indexFlog,()=>{
                if(indexFlog.value == 16){
                    selecte(4);
                }
            })
            //改变IndexFlog
            let ChangeIndexFlog = inject('ChangeIndexFlog')
            return {imgsrc,selecte,SendId,ChangeIndexFlog}
        }
    }
</script>

<style scoped>
    .iot_menu{
    width: 66px;
    border-right: 1px solid #e5e9f2;
    display: flex;
    display: flex;
    flex-direction:column;
    align-items: center;
    }
    .iot_menu img{
        width: 30px;
        height: 30px;
        margin: 20px 0;
    }
</style>